<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
    
</div>
<script>
    let child={
        template:`
        <div>
            <p>组件</p>
            <p>{{ childStr }}</p>
            <button @click="fun">给父页面传参数</button>
        </div>
        `,
        
            props:{
                childStr:{
                    type:String,
                    // require:true
                    default:'默认值',
                    // validator(t){
                    //     return t === 'aaa' || t === 'bbb'
                    // }
                }
            },
            //向父组件发送参数
            methods:{
                fun(){
                    //发送变量用$emit('')
                    this.$emit('add',10)
                }
            }
    }
    //全局组件
    // Vue.component ('global-vue',globalVue)

    let App={
        template:`
        <div>
            <h1>主页{{ count }}</h1>
           <child :childStr="str"  @add="addCount"></child>
        </div>
    `,data(){
        return {
            str:'父页面传过来的参数',
            count:1
        }
    },
    //局部组件
    components:{child},
    methods:{
        addCount(data){
            console.log('data---',data.index)
            this.count += data.index
        }
    }
}
    new Vue({
        render: h => h(App)
    }).$mount("#app")
</script>
</body>
</html>